<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css">
	<link rel="stylesheet" href="css/main.css" />
	<!-- <script type="text/javascript" src="js/prefixfree.min.js" ></script> -->
</head>
<body>
	<div class="wrap data-index">
		<div class="content">
			<div class="main-left">
				<div class="main-head">
					<div class="main-head-one">
						<div class="search-box">
							<div class="search i">
								<input type="text" class="i" />
								<div class="sel-prompt">
								</div>
								<button class="i">确定</button>
							</div>
							<!-- <div class="username i">
								当前用户：拉登是我干掉的
							</div> -->
						</div>
						<div class="progress-bar">
							<span>云指数</span>
							<div class="bar">
								<span class="runner"></span>
								<em class="progress-num">
									<i>200</i>
									<div class="level">一般</div>
								</em>
								<em class="progress-num">
									<i>400</i>
									<div class="level">中等</div>
								</em>
								<em class="progress-num">
									<i>600</i>
									<div class="level">良好</div>
								</em>
								<em class="progress-num">
									<i>800</i>
									<div class="level">优秀</div>
								</em>
								<em class="progress-num">
									<div class="level">极好</div>
								</em>
							</div>
						</div>
					</div>
					<h3 class="chart-box-tit">云指数解读</h3>
				</div>
				<div class="chart-box">
					<div class="chart-item float-left chart-semicircle-box">
						<div class="chart-semicircle">
							<i class="origin"></i>
							<em class="semicircle w20"></em>
							<em class="semicircle w30"></em>
							<em class="semicircle w40"></em>
							<em class="semicircle w50"></em>
							<em class="semicircle w60"></em>
						</div>
						<div class="exponent"> 
							<em>660</em> 
							<i>信用指数</i>
						</div>
						<div class="chart-title">
							<i>行业类型</i>
							<i>资源容量</i>
							<i>用户特征</i>
							<i>技术能力</i>
							<i>信用记录</i>
						</div>
						<div class="num-scope">
							<ul>
								<li>极好<em>800-100</em></li>
								<li>优秀<em>600-800</em></li>
								<li>良好<em>400-600</em></li>
								<li>中等<em>200-400</em></li>
								<li>一般<em>0-200</em></li>
							</ul>
						</div>
					</div>
					<div class="chart-item float-right">
						<div class="chart-histogram">
							<ul class="histogram">
								<li> 
									<em>
										<i><span>80</span></i>
									</em>
								</li>
								<li> 
									<em>
										<i><span>60</span></i>
									</em>
								</li>
								<li> 
									<em>
										<i><span>50</span></i>
									</em>
								</li>
								<li> 
									<em>
										<i><span>320</span></i>
									</em>
								</li>
								<li> 
									<em>
										<i><span>160</span></i>
									</em>
								</li>
							</ul>
							<div class="chart-title">
								<i><span>行业类型</span></i>
								<i><span>资源容量</span></i>
								<i><span>用户特征</span></i>
								<i><span>技术能力</span></i>
								<i><span>信用记录</span></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="main-right">
				<div class="main-head">
					<div class="main-head-one">
						<div class="data-logo">
							<!-- <img src="images/logo.png"> -->
							<h1><em>指数</em>云指数</h1>
							<p>云数据大数据<i>Wo Cloud Big Data</i></p>
						</div>
					</div>
					<span class="list-tit">
						<i class="float-left">重点客户</i>
						<i class="float-right">云指数</i>
					</span>
				</div>
				<div class="client-list">
					<ul class="list">
						<li class="cur" num="30,40,50,60,90">
							<em>亚马逊（Amazon）</em>
							<i>660</i>
						</li>
						<li num="90,60,50,40,30">
							<em>阿里巴巴（Alibaba）</em>
							<i>240</i>
						</li>
						<li num="80,70,80,70,80">
							<em>京东（JD）</em>
							<i>520</i>
						</li>
						<li num="50,60,70,30,50">
							<em>中国铁塔（China Tower）</em>
							<i>900</i>
						</li>
						<li num="70,60,40,50,30">
							<em>国家安监总局</em>
							<i>380</i>
						</li>
						<li num="60,70,80,90,60">
							<em>中国铁路1</em>
							<i>100</i>
						</li>
						<li num="60,70,80,90,60">
							<em>中国铁路2</em>
							<i>100</i>
						</li>
						<li num="60,70,80,90,60">
							<em>中国铁路3</em>
							<i>100</i>
						</li>
						<li num="60,70,80,90,60">
							<em>中国铁路4</em>
							<i>100</i>
						</li>
						<li num="60,70,80,90,60">
							<em>中国铁路5</em>
							<i>100</i>
						</li>
						<li num="60,70,80,90,60">
							<em>中国铁路6</em>
							<i>100</i>
						</li>
						<li num="60,70,80,90,60">
							<em>中国铁路7</em>
							<i>100</i>
						</li>
						<li num="60,70,80,90,60">
							<em>中国铁路8</em>
							<i>100</i>
						</li>
						<li num="60,70,80,90,60">
							<em>中国铁路9</em>
							<i>100</i>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/mian.js"></script>
<script src="js/jquery-ui-1.10.4.min.js"></script>
<script src="js/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript">
// 进度条
// runner(10);

// 柱状图数据
// histogram("30",40,70,80,90);

// 半圆触发
// semicircle();

// 滚动条
(function($){
    $(window).load(function(){
        $(".list").mCustomScrollbar();
    });
})(jQuery);
</script>
</body>
</html>
